<!DOCTYPE html>
<html>
<head>
    <title>Animation effects</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
            <div id="example" class="k-content">

            <div class="configuration k-widget k-header">
                <span class="configHead">Animation Settings</span>
                <ul class="options">
                    <li>
                        <input id="default" name="animation" type="radio" checked="checked" /> <label for="default">default/zoom animation</label>
                    </li>
                    <li>
                        <input id="toggle" name="animation" type="radio" /> <label for="toggle">toggle animation</label>
                    </li>
                    <li>
                        <input id="expand" name="animation" type="radio" checked="checked" /> <label for="expand">expand animation</label>
                    </li>
                    <li>
                        <input id="opacity" type="checkbox" checked="checked" /> <label for="opacity">animate opacity</label>
                    </li>
                </ul>
            </div>

            <div id="window">
                <div style="text-align: center;">
                    <img src="../../content/web/window/egg-chair.png" alt="ARNE JACOBSEN EGG CHAIR" />
                    <p>ARNE JACOBSEN EGG CHAIR<br /> Image by: <a href="http://www.conranshop.co.uk/" title="http://www.conranshop.co.uk/">http://www.conranshop.co.uk/</a></p>
                </div>
            </div>

            <span id="undo" style="display:none" class="k-group">Click here to open the window.</span>

            <script>
                function onClose() {
                    $("#undo").fadeIn(300);
                }

                $(document).ready(function () {
                    var original = $("#window").clone(true);

                    $(".configuration input").change(function () {
                        var clone = original.clone(true);

                        $("#undo").hide();
                        $("#window").data("kendoWindow").destroy();

                        setTimeout(function () {
                            $("#example").append(clone);
                            initWindow();
                        }, 200);
                    });

                    var getEffects = function () {
                        return (($("#expand")[0].checked ? "expand:vertical " : "") +
                                ($("#opacity")[0].checked ? "fadeIn" : "")) || false;
                    };

                    function initWindow() {
                        var windowOptions = {
                            width: "500px",
                            title: "EGG CHAIR",
                            visible: false,
                            close: onClose
                        };

                        if (!$("#default")[0].checked)
                            windowOptions.animation = { open: { effects: getEffects() }, close: { effects: getEffects(), reverse: true} };

                        $("#window").kendoWindow(windowOptions);

                        $("#undo")
                            .bind("click", function () {
                                $("#window").data("kendoWindow").open();
                                $("#undo").fadeOut(300);
                            });

                        $("#window").data("kendoWindow").open();
                    }

                    initWindow();
                });
            </script>

            <style scoped>
                #example {
                    min-height:400px;
                }

                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    border-width: 1px;
                    border-style: solid;
                    padding: 2em;
                    cursor: pointer;
                }
            </style>
        </div>

</body>
</html>
